<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NexMagic Scholar</title>
    <link rel="stylesheet" href="../css/dataGalaxy/index.css"/>
    <link rel="stylesheet" href="../css/dataGalaxy/dg-scholar.css"/>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        html, body {
            height: 100%;
        }

        .colorTip {
            width: 20px;
            height: 7px;

            vertical-align: middle;
            float: right;
            margin-right: 35px;
            margin-top: 8px;
        }

        .mark-box {
            width: 510px;

            position: absolute;
            top: 50px;
            right: 50px;

            text-align: justify;

        }

        .mark-box p {
            line-height: 25px;
            font-size: 18px;
            margin: 8px 0;

        }

        .loading {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: white;

            z-index: 999999;
            overflow: hidden;

        }
        .loading .loading-box {
            position: absolute;
            top: 50%;
            left:0;
            width: 100%;
            margin-top: -11px;
        }
        .controller {
            right: 4%;
        }
    </style>
</head>
<body class="body-loading">
<div class="main" >
    <div class="controller">
        <div class="num">
            <p>Amount of publication</p>
            <div id="check" class="ul check">
                <div><input type="checkbox" class="quanxuan1 input_check" id="ntype" checked>
                    <label for="ntype"></label>All Selected
                </div>
                <div><input type="checkbox" class="input_check input_check1" id="ntype4" checked><label
                        for="ntype4"></label>100+
                    <img src="../img/dataGalaxy/1.png"/>
                </div>
                <div><input type="checkbox" class="input_check input_check1" id="ntype3" checked><label
                        for="ntype3"></label>60-100
                    <img src="../img/dataGalaxy/2.png"/>
                </div>
                <div><input type="checkbox" class="input_check input_check1" id="ntype2" checked> <label
                        for="ntype2"></label>51-60
                    <img src="../img/dataGalaxy/3.png"/>
                </div>
                <div><input type="checkbox" class="input_check input_check1" id="ntype1" checked><label
                        for="ntype1"></label>11-50
                    <img src="../img/dataGalaxy/4.png"/>
                </div>

                <div><input type="checkbox" class="input_check input_check1" id="ntype0" checked><label
                        for="ntype0"></label>0-10
                    <img src="../img/dataGalaxy/5.png"/>
                </div>
            </div>
        </div>
        <div class="num num2">
            <p>Number of Co-authorship</p>
            <div id="check2" class="ul check2 check">
                <div><input type="checkbox" class="quanxuan2 input_check" id="ltype" checked>
                    <label for="ltype"></label>All Selected
                </div>
                <div><input type="checkbox" class="input_check input_check2" id="ltype2" checked><label
                        for="ltype2"></label>5+
                    <div class="colorTip" style="background-color: #7a8fef"></div>
                </div>
                <div><input type="checkbox" class="input_check input_check2" id="ltype1" checked><label
                        for="ltype1"></label>2-5
                    <div class="colorTip" style="background-color: #66b1ba"></div>
                </div>
                <div><input type="checkbox" class="input_check input_check2" id="ltype0" checked><label
                        for="ltype0"></label>1-2
                    <div class="colorTip" style="background-color: #7f7f7f"></div>
                </div>
            </div>
        </div>
        <div class="num3">
            <div>
                <label for="nodeLabel">Node Label</label>
                <input type="checkbox" class="showTips" id="nodeLabel">
            </div>
            <div >
                <label for="linkLabel">Link Label</label>
                <input type="checkbox" class="showTips" id="linkLabel">
            </div>
        </div>
        <!--<div class="num3">
            <span>Finding</span>
            <button type="button" class="show_bfs">Start</button>
            <div class="bfs_form">
                起点：<input type="text" class="id1" disabled="true" placeholder="在图上点击起点"/>
                终点：<input type="text" class="id2" disabled="true"/>
                最长：<input type="number" value="6" class="maxlength"/>
            </div>
        </div>-->
    </div>
    <div class="mark-box">
        <p>The size of the nodes represents the number of author's publication. The edges represent the number of
            co-authorship. The darker the color, the greater the value.</p>
    </div>
    <div class="container">
    </div>
</div>
<div class="loading">
    <div class="sk-spinner sk-spinner-three-bounce loading-box">
        <div class="sk-bounce1"></div>
        <div class="sk-bounce2"></div>
        <div class="sk-bounce3"></div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/dataGalaxy/dg-scholar.js"></script>
<script src="../js/layer/layer.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    var height = $(window).innerHeight()
    $('.container').css('height', height)
    var keyword = getUrlParam("keyword");
    var min = getUrlParam("min");;
    var max = getUrlParam("max");;
    var language = getUrlParam("language");;
    var country = getUrlParam("country");;
    var papers5yOr10y = getUrlParam("papers5yOr10y");;
    
    var data = {}; // 处理计算步长结果所需
    gAjax.request("expert/getRelateExpertParam", {
    	name: keyword, 
    	min: min, 
    	max: max, 
    	language: language, 
    	country: country, 
    	papers5yOr10y: papers5yOr10y, 
    	nodeSize: 300
    }).then(function (result) {
    

        var graph = {nodes: [], links: []};
        
        var nodesSet = [];
        var linksSet = [];
        
        var nodesMap = {};
        var linksMap = {};
        
        var i = 0;
        var j = 0;
        
        result.forEach(function (item) {
        	
        	/**
        	* 说明是有关系的
        	*/
        	
        	var expertId_ = item["eId"];
    		var index_ = $.inArray(expertId_,nodesSet);
        	
    		if(index_ == -1) {
    			nodesSet.push(expertId_);
    			nodesMap[expertId_] = i++;
    			var sourceNode_ = {
                    id: nodesMap[expertId_],
                    name: item["ename"],
                    paper_count: item["epnum"],
                    url: "analysis.html?scholarId=" + item["eId"]
                 };
       			
                 graph.nodes.push(sourceNode_);
    		}
        	
        	if(item["relate"]) {
        		
        		var expertId = item["rId"];
        		var index = $.inArray(expertId,nodesSet);
        		
        		if(index == -1) {
        			nodesSet.push(expertId);
        			nodesMap[expertId] = i++;
        			var sourceNode = {
                         id: nodesMap[expertId],
                         name: item["rname"],
                         paper_count: item["rpnum"],
                         url: "analysis.html?scholarId=" + item["rId"]
                     };
        			
                     graph.nodes.push(sourceNode);
        		}
        		
        		var linkR1 = item["rId"] + "-" + item["eId"];
        		var linkR2 = item["eId"] + "-" + item["rId"];
        		
        		var index1 = $.inArray(linkR1,linksSet);
        		var index2 = $.inArray(linkR2,linksSet);
        		
        		/**
        		* 2个关系都不存在
        		*/
        		if(index1 == -1 && index2 == -1) {
        			linksSet.push(linkR1);
        			linksSet.push(linkR2);
        			var link = {
                         id: j++,
                         source: nodesMap[item["eId"]],
                         target: nodesMap[item["rId"]],
                         co_count: Math.floor(Math.random() * 10 + 1)
                     };
                     graph.links.push(link);
        			
        		}

        	}
        	
        	
           /*  if (!nodesMap[item["e.name"]] && nodesMap[item["e.name"]] != 0) {
                nodesMap[item["e.name"]] = i++;
                var sourceNode = {
                    id: nodesMap[item["e.name"]],
                    name: item["e.name"],
                    paper_count: item["e.pnum"],
                    url: "analysis.html?scholarId=" + item["id(e)"]
                };
                graph.nodes.push(sourceNode);
                data[sourceNode.id] = sourceNode;
            }
            if (!nodesMap[item["e1.name"]] && nodesMap[item["e1.name"]] != 0) {
                nodesMap[item["e1.name"]] = i++;
                var targetNode = {
                    id: nodesMap[item["e1.name"]],
                    name: item["e1.name"],
                    paper_count: item["e1.pnum"],
                    url: "analysis.html?scholarId=" + item["id(e1)"]
                };
                graph.nodes.push(targetNode);
                data[targetNode.id] = targetNode;
            } */
            // 过滤重复的关系，例如1-2，2-1
            /* if (!linksMap[item["id(e1)"] + "-" + item["id(e)"]] && !linksMap[item["id(e)"] + "-" + item["id(e1)"]]) {
                linksMap[item["id(e)"] + "-" + item["id(e1)"]] = j + 1; // 从1开始，方便判断，如果从0开始，！0为true
                var link = {
                    id: j++,
                    source: nodesMap[item["e.name"]],
                    target: nodesMap[item["e1.name"]],
                    co_count: Math.floor(Math.random() * 10 + 1)
                };
                graph.links.push(link);
            } */
        });

        initKG("../js/dataGalaxy/conf.json", "div .container", graph, function() {
            recordContainerClick(function() {
                $('#nodeLabel').prop('checked', false);
                $('#linkLabel').prop('checked', false);
            });
            recordNodeClick(function(d) {
                /*$("#eventRecorder").text("点击节点"+d.id);*/
            });

            $("body").removeClass("body-loading");
            $(".loading").remove();
        });
    });
    $(".num .quanxuan1").click(function () {//给全选按钮加上点击事件
        console.log($(this))
        //	console.log($(this).prop("checked"))
        var xz = $(this).prop("checked");//判断全选按钮的选中状态

        var ck = $(".input_check1").prop("checked", xz);  //让class名为qx的选项的选中状态和全选按钮的选中状态一致。
    })
    $('.num2 .quanxuan2').click(function () {
        var xz = $(this).prop("checked");//判断全选按钮的选中状态
        var ck = $(".input_check2").prop("checked", xz);  //让class名为qx的选项的选中状态和全选按钮的选中状态一致。
    })

    $(".wrapper").click(function () {
        $(".wrapper i").css('color', '#b5cad0')
        $(this).find("i").css('color', '#69b4bd')
    })
    //console.log($("#check5"))


    //根据图例的选择过滤节点和边
    function filterByLegend() {
        $(document).on('change', $("checkbox.input_check"), function () {
            var nodeShows = [];
            var linkShows = [];
            var nodeHides = [];
            var linkHides = [];
            $(":checkbox").each(function () {
                if ($(this).prop('checked') === true) {
                    if ($(this).hasClass('input_check1')) {
                        nodeShows.push(this.id);
                    } else if ($(this).hasClass('input_check2')) {
                        linkShows.push(this.id);
                    }
                } else {
                    if ($(this).hasClass('input_check1')) {
                        nodeHides.push(this.id);
                    } else if ($(this).hasClass('input_check2')) {
                        linkHides.push(this.id);
                    }
                }
            })
            filterKG(nodeShows, linkShows, nodeHides, linkHides);
        })
    }

    filterByLegend();

    //Lable标签显示
    $(document).on('change', $('#nodeLabel'), function () {
        if ($('#nodeLabel').prop('checked') === true) {
            showNodeLabel(true);
        } else {
            showNodeLabel(false);
        }
    });
    $(document).on('change', $('#linkLabel'), function () {
        if ($('#linkLabel').prop('checked') === true) {
            showLinkLabel(true);
        } else {
            showLinkLabel(false);
        }
    });

    //关系发现按钮
    $('.bfs_form').css('display', 'none')

    $('.show_bfs').click(function () {
        layer.confirm('Pleases select two nodes randomly in graph and press"Confirm"button.', {
            type: 0,
            btn: ['Confirm', 'Reset'],
            title: false,
            shade: 0,
            offset: '20px',
            cancel: function (index, layero) {
                restore()
            }
        }, function (index, layero) {
            var num1 = Number($('.id1').attr('test'));
            var num2 = Number($('.id2').attr('test'));
            if (!num1 || !num2) {
                layer.msg("Pleases select two nodes!", {type: 1});
            } else {
                var result = findRelationBetween2Nodes(num1, num2, Number($('.maxlength').val()));
                console.log();
                var resultSolved = {nodes: [], links: []};
                var nodesMap = {}, linksMap = {};
                var linksId = 0, nodesId = 0;
                result.forEach(function (arr) {
                    var lastId = -1;
                    arr.forEach(function (id) {
                        if (nodesMap[id] == undefined) {
                            data[id].id = nodesId++;
                            nodesMap[id] = data[id]; // 用作节点重复验证
                            resultSolved.nodes.push(data[id]);
                        }
                        if (lastId >= 0) {
                            if (linksMap[lastId + "-" + id] == undefined) {
                                linksMap[lastId + "-" + id] = linksId;
                                resultSolved.links.push({
                                    id: linksId++,
                                    source: data[lastId].id,
                                    target: data[id].id,
                                    co_count: 10
                                });
                            }
                        }
                        lastId = id;
                    })
                });
                setStorage("graphStepResult", [resultSolved, result.length]);
                $("#resultGraph").show();
                layer.open({
                    type: 2,
                    shadeClose: false,
                    title: false,
                    shade: 0.3,
                    area: [document.body.offsetWidth * 0.8 + 'px', document.body.offsetHeight * 0.8 + 'px'],
                    content: 'dataGalaxyIFrame.html',
                    cancel: function (index, layero) {
                        restore()
                    }
                });
                layer.close(index);
            }
        }, function (index) {
            restore()
        });

        $(this).css('display', 'none')
        $('.bfs_form').css('display', 'block')
        recordNodeClick(recordStartNode);
    })

    function restore() {// 重置
        $('.id1').val(null);
        $('.id2').val(null);
        $('.bfs_form').css('display', 'none')
        $('.num3 span').show()
        $('.show_bfs').show()
    }

    function recordStartNode(node) {
        $('.id1').val(node.name);
        $('.id1').attr('test', node.id);
        recordNodeClick(recordEndNode);
        $('.id2').attr('placeholder', '在图上点击终点')
    }

    function recordEndNode(node) {
        $('.id2').val(node.name);
        $('.id2').attr('test', node.id);
        recordNodeClick();
    }

</script>
</body>
</html>